
$(function () {



  // 浏览条点击消失
  var $error = $("#error");
  var $browse = $(".browse")
  $error.on("click", function (e) {
    e.stopPropagation()
    $browse.hide()
  })
  // 轮播图
  var mySwiper = new Swiper('#swiper_min', {
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },

  })
  // 最后的轮播图
  var mySwiper_min = new Swiper('#slide_min', {
    loop: true, // 循环模式选项
    autoplay: true,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    }
  })
  // 模糊搜索
  var search_ipt = $("#search");
  var list_ele = $("#list");

  search_ipt.on("input", function () {
    // 核心就是发送一个携带合理数据的jsonp请求; 
    // - ajax发送请求最重要的就是 ： 
    // - 1. 请求方式 ; 
    // - 2. 请求携带的数据; 

    var options = {
      url: "https://www.baidu.com/sugrec",
      data: {
        prod: "pc",
        from: "pc_web",
        wd: search_ipt.val()
      },
      jsonp: "cb",
      dataType: "jsonp",
      success: function (res) {
        render(res);
      }
    }
    $.ajax(options)
  })

  function render(data) {
    if (data.g instanceof Array) {
      // 根据返回的数据，去渲染html结构，让后把html结构放入到list元素之中; 
      var html = data.g.map(function (item) {
        return `<li>${item.q}</li>`
      }).join("");
      list_ele.html(html);
    } else {
      list_ele.html("");
    }
  }


  // 选项卡
  var $btns = $("button")
  var $contents = $(".box")
  $btns.click(function () {
    $(this).siblings().removeClass("active")
    $contents.eq($(this).index()).siblings().removeClass("active")
    if (this.className !== "active") {
      $(this).addClass("active")
      $contents.eq($(this).index()).addClass("active")
    }
  })


  // 懒加载
  $(".img").lazyload();


  // 吸顶菜单

  var $nav = $(".nav");
  var $header = $(".header-center img");
  var $nav_ele = $(".nav-rights");
  var $nav_left = $(".nav-left")
  $(window).on("scroll", function () {
    // var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var scrollTop = $("body,html").scrollTop();
    if (scrollTop >= 145) {
      $nav.css({
        position: "fixed",
        top: "0",
        left: "0",
      }),
        $nav_left.css({
          marginLeft: "100px"
        })
      $header.css({
        position: "fixed",
        top: "20px",
        left: " 30px",
        zIndex: "999",
        width: "50px",
        height: "50px"

      })
      $nav_ele.css({
        top: "0",
        right: "50px",

      })

    } else {
      $nav.css({
        position: "inherit"
      })
      $nav_left.css({
        marginLeft: "0px"
      })
      $header.css({
        position: "static",
        width: "100px",
        height: "100px"
      })
      $nav_ele.css({
        top: "140px",
        right: " 50px"
      })
    }
  })


  // 登录点击出现页面
  var $yzm = $(".yzm")
  var $yzm_nav = $(".yzm-nav")
  var $cont = $("#cont")
  $yzm.click(function () {
    $yzm_nav.css({
      display: "block",

    })

  })
  $cont.click(function (e) {
    e.stopPropagation()

    $yzm_nav.css({
      display: "none",
    })

  })


  // 登录
  var $username_ele = $("#username");
  var $password_ele = $("#password");
  var $login_ele = $(".login");
  //点击按钮触发事件
  $login_ele.on("click", function () {
    //GET方式发送请求，数据应该携带在URL之中; 
    var url = "./static/php/login.php?username=" + $username_ele.value + "&password=" + $password_ele.value;
    //创建xhr对象
    var xhr = new XMLHttpRequest();
    //配置请求信息 (第一个参数 请求方式   第二个参数请求地址  第三个参数是否异步)
    xhr.open("GET", url);
    //发送请求
    xhr.send();
    //readyState 发生改变  只有值变化就会触发事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var res = xhr.responseText;
        if (res.type !== "error") {
          alert("恭喜登录成功，3秒后跳转页面");
          setTimeout(function () {
            location.href = "./stairs.html";
          }, 3000)
        }
        else {
          alert(res.error);
        }
      }
    }
  })



  // 注册页面
  var register_ele = $("#register");
  var usernames_ele = $("#usernames");
  var passwords_ele = $("#passwords");

  register_ele.on("click", function () {

    //先把url拼接好
    var url = "./static/php/register.php?username=" + usernames_ele.value + "&password=" + passwords_ele.value;
    //创建xhr对象
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    //接受服务器响应
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var res = JSON.parse(xhr.responseText);
        if (res.type === "success") {
          alert("恭喜注册成功，3秒后跳转登录页面");
          setTimeout(function () {
            location.href = "./stairs.html";
          }, 3000)
        } else {
          alert("抱歉注册失败了，错误原因是" + res.error);
        }
      }

    }
  })

})

